{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# FastHTML\n",
    "\n",
    "> The fastest, most powerful way to create an HTML app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Welcome to the official FastHTML documentation.\n",
    "\n",
    "FastHTML is a new next-generation web framework for fast, scalable web applications with minimal, compact code. It's designed to be:\n",
    "\n",
    "* Powerful and expressive enough to build the most advanced, interactive web apps you can imagine.\n",
    "* Fast and lightweight, so you can write less code and get more done.\n",
    "* Easy to learn and use, with a simple, intuitive syntax that makes it easy to build complex apps quickly.\n",
    "\n",
    "FastHTML apps are just Python code, so you can use FastHTML with the full power of the Python language and ecosystem. FastHTML's functionality maps 1:1 directly to HTML and HTTP, but allows them to be encapsulated using good software engineering practices---so you'll need to understand these foundations to use this library fully. To understand how and why this works, please read this first: [about.fastht.ml](https://about.fastht.ml/)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Installation\n",
    "\n",
    "Since `fasthtml` is a Python library, you can install it with:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```sh\n",
    "pip install python-fasthtml\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the near future, we hope to add component libraries that can likewise be installed via `pip`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Usage"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For a minimal app, create a file \"main.py\" as follows:\n",
    "\n",
    "```{.python filename=\"main.py\"}\n",
    "from fasthtml.common import *\n",
    "\n",
    "app,rt = fast_app()\n",
    "\n",
    "@rt('/')\n",
    "def get(): return Div(P('Hello World!'), hx_get=\"/change\")\n",
    "\n",
    "serve()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Running the app with `python main.py` prints out a link to your running app: `http://localhost:5001`. Visit that link in your browser and you should see a page with the text \"Hello World!\". Congratulations, you've just created your first FastHTML app!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Adding interactivity is surprisingly easy, thanks to HTMX. Modify the file to add this function:\n",
    "\n",
    "```{.python filename=\"main.py\"}\n",
    "@rt('/change')\n",
    "def get(): return P('Nice to be here!')\n",
    "```\n",
    "\n",
    "You now have a page with a clickable element that changes the text when clicked. When clicking on this link, the server will respond with an \"HTML partial\"---that is, just a snippet of HTML which will be inserted into the existing page. In this case, the returned element will replace the original P element (since that's the default behavior of HTMX) with the new version returned by the second route.\n",
    "\n",
    "This \"hypermedia-based\" approach to web development is a powerful way to build web applications."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Next Steps"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Start with the official sources to learn more about FastHTML:\n",
    "\n",
    "- [About](https://about.fastht.ml): Learn about the core ideas behind FastHTML\n",
    "- [Documentation](https://docs.fastht.ml): Learn from examples how to write FastHTML code\n",
    "- [Idiomatic app](https://github.com/AnswerDotAI/fasthtml/blob/main/examples/adv_app.py): Heavily commented source code walking through a complete application, including custom authentication, JS library connections, and database use.\n",
    "\n",
    "We also have a 1-hour intro video:\n",
    "\n",
    "{{< video https://www.youtube.com/embed/Auqrm7WFc0I >}}\n",
    "\n",
    "The capabilities of FastHTML are vast and growing, and not all the features and patterns have been documented yet. Be prepared to invest time into studying and modifying source code, such as the main FastHTML repo's notebooks and the official FastHTML examples repo:\n",
    "\n",
    "- [FastHTML Examples Repo on GitHub](https://github.com/AnswerDotAI/fasthtml-example)\n",
    "- [FastHTML Repo on GitHub](https://github.com/AnswerDotAI/fasthtml)\n",
    "\n",
    "Then explore the small but growing third-party ecosystem of FastHTML tutorials, notebooks, libraries, and components:\n",
    "\n",
    "- [FastHTML Gallery](https://gallery.fastht.ml): Learn from minimal examples of components (ie chat bubbles, click-to-edit, infinite scroll, etc)\n",
    "- [Creating Custom FastHTML Tags for Markdown Rendering](https://isaac-flath.github.io/website/posts/boots/FasthtmlTutorial.html) by Isaac Flath\n",
    "- Your tutorial here!\n",
    "\n",
    "Finally, join the FastHTML community to ask questions, share your work, and learn from others:\n",
    "\n",
    "- [Discord](https://discord.gg/qcXvcxMhdP)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "python3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
